<template>
	<view class="background">
		<view class="ticket-from">
			<view
				v-for="(ticket, ticketIndex) in ticketList"
				:key="ticketIndex"
				class="ticket-item">
				<image
					@click="removeTicket(ticket.id)" 
					src="../../static/icon_remove_red.png" />
			    <view class="ticket-info" @tap="editTicket(ticket.id)">
					<text style="font-weight: bold; font-size: 38rpx;">{{ticket.companyName}}</text>
					<text style="color: #949699; font-size: 30rpx;">{{ticket.email}}</text>
				</view>
				<image
					@click="removePassenger(passenger.id)" 
					src="../../static/icon_edit_blue.png" />
			</view>
		</view>
		<view class="bottom-view">
			<view @tap="editTicket()" class="bottom-btn">
				<text>添加</text>
			</view>
		</view>
	</view>
</template>
<script>
var openid;
import api from '../../api';
export default {
	data() {
		return {
			ticketList: [],
		};
	},
	onLoad(option) {
		this.getTicketList();
	},
	methods: {
		async getTicketList() {
			const { code, data } = await api.ticket.ticketList({page:1, pageSize:100});
			if (code === 200) {
				this.ticketList = data?.list || [];
			}
		},
		
		// 删除乘客
		removeTicket(id) {
			uni.showModal({
				title: '提示',
				content: '确定删除?',
				success: async (res) => {
					if (res.confirm) {
						const { code } = await api.ticket.deteteTicket({ id: id });
						if (code === 200) {
							this.getTicketList();
						}
					}
				}
			});
		},
		
		editTicket(id) {
			console.log(id);
			if(id) {
				console.log(1);
				uni.navigateTo({
					url: `/pages/ticket/ticket-add?ticketId=${id}`
				});
			}
			else {
				console.log(2);
				uni.navigateTo({
					url: `/pages/ticket/ticket-add?ticketId`
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.background {
		height: 100%;
		background: linear-gradient(to bottom, #2697FF 0%, #F7F7F7 30%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.ticket-from {
			.ticket-item {
				display: flex;
				flex-direction: row;
				height: 110upx;
				margin-left: 20upx;
				margin-right: 20upx;
				align-items: center;
				background: #FFF;
				margin: 0 20upx;
				padding: 20upx;
				border-bottom: solid 1upx #EFEFEF;
				.ticket-info {
					display: flex;
					flex: 1;
					height: 100%;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 10upx;
				}
				image {
					width: 40upx;
					height: 40upx;
				}
			}
		}
		.bottom-view {
			height: 150upx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			background: #FFFFFF;
			.bottom-btn {
				width: 90%;
				margin-top: 10upx;
				height: 100upx;
				border-radius: 16upx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background: #2697FF;
				color: #FFFFFF;
			}
		}
	}
</style>
